<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
    <navigationBar :emitBackEvent="true" @backEvent="$emit('backHandle')" :my-property="navigationBarDataInfo"/>
    <view class="topic-bg-warpper">
      <view class="topic-bg" :style="{backgroundImage: `url(${staticImgs.topic})`}">
        <view class="num-wrapper">
          <text class="num">{{`${current}`.padStart(2, '0')}}/</text>{{`${max}`.padStart(2, '0')}}
        </view>
        <view class="time-wrapper">
          <image :src="staticImgs.time" class="time"/>{{countTimeStr}}
        </view>
        <view class="topic-title">{{question}}</view>
      </view>
    </view>
    <view class="opt-wrapper">
      <view
          v-for="(item, index) in optnList.slice(0, 4)"
          :class="['opt-item', {active: item.select === '1'}]"
          :key="index"
          @click="selectAnswer(item, index)"
      >
        <image class="opt-item-img" :src="staticImgs[`option${index + 1}`]"/>
        <view class="opt-item-content">{{item.optnContent}}</view>
      </view>
    </view>
    <view class="btm" :style="{backgroundImage: `url(${staticImgs.btm})`}">
      <image
        class="btm-btn"
        :src="staticImgs.prev"
        @click="$emit('prev')"
      />
      <image
        class="btm-btn"
        :src="max === current ? staticImgs.submit : staticImgs.next"
        @click="next"
      />
    </view>
    
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";

  let clockTimer;

  export default {
    components:{
      navigationBar
    },
    props:{
      max: {
        type: Number,
        default: 0
      },
      current: {
        type: Number,
        default: 0
      },
      countTime: {
        type: String,
        default: ''
      },
      optnList: {
        type: Array,
        default: () => []
      },
      question: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        navigationBarDataInfo: {
          "bg_color": "transparent",
          "color": "transparent",
          "flag": 4,
          "name": "",
          "hasEntity": false
        },
        staticImgs: {
          bg: this.imgBaseURL + '/scl/question-page/fpacpt/bg.png',
          prev: this.imgBaseURL + '/scl/question-page/fpacpt/prev.png',
          next: this.imgBaseURL + '/scl/question-page/fpacpt/next.png',
          submit: this.imgBaseURL + '/scl/question-page/fpacpt/submit.png',
          btm: this.imgBaseURL + '/scl/question-page/fpacpt/btm.png',
          time: this.imgBaseURL + '/scl/question-page/fpacpt/time.png',
          topic: this.imgBaseURL + '/scl/question-page/fpacpt/topic.png',
          option1: this.imgBaseURL + '/scl/question-page/fpacpt/a.png',
          option2: this.imgBaseURL + '/scl/question-page/fpacpt/b.png',
          option3: this.imgBaseURL + '/scl/question-page/fpacpt/c.png',
          option4: this.imgBaseURL + '/scl/question-page/fpacpt/d.png'
        },
        countTimeStr: '',
        startDateTime: 0
      }
    },
    watch: {
      countTime(val) {
        if (val) {
          this.countTimeStr = val
        }
      }
    },
    mounted() {
      this.startDateTime = this.$dayjs()
      clockTimer = setInterval(() => {
        this.countTimeStr = this.$dayjs().subtract(this.startDateTime).format('mm:ss')
      }, 1000)
    },
    beforeDestroy(){
      clearInterval(clockTimer)
    },
    methods:{
      selectAnswer(item,index){
      	this.$emit('updateSelectSclQuestion',index);
      },
      next() {
        if (!this.optnList.some(item => item.select === '1')) {
          this.$showToast('请选择')
          return
        }
        this.$emit('next')
      }
    }
  }
</script>

<style scoped lang="scss">
.container {
  height: 1624rpx;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.topic-bg-warpper {
  padding: 133rpx 37rpx 46rpx 20rpx;
}

.topic-bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 520rpx;
  position: relative;

  .num-wrapper {
    position: absolute;
    top: 70rpx;
    left: 129rpx;
    font-weight: bold;
    font-size: 50rpx;
    color: #1584AF;

    .num {
      color: #FFF;
    }
  }

  .time-wrapper {
    position: absolute;
    right: 0;
    top: 64rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #1584AF;
    display: flex;
    align-items: center;

    .time {
      width: 36rpx;
      height: 36rpx;
      margin-right: 9rpx;
    }
  }

  .topic-title {
    width: 693rpx;
    height: 518rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #333;
    line-height: 42rpx;
    letter-spacing: 2rpx;
    padding: 281rpx 54rpx 0 98rpx;
    box-sizing: border-box;
  }
}

.opt-wrapper {
  padding: 0 37rpx 0 42rpx;
  .opt-item {
    position: relative;
    margin-bottom: 50rpx;

    .opt-item-img {
      position: absolute;
      top: -30rpx;
      left: -30rpx;
      width: 160rpx;
      height: 160rpx;
    }

    .opt-item-content {
      height: 116rpx;
      margin-left: 34rpx;
      background-image: linear-gradient(180deg, #FFF 0%, #CCF0FE 100%);
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
      font-size: 30rpx;
      color: #333;
      line-height: 42rpx;
      display: flex;
      align-items: center;
      padding-left: 96rpx;
      padding-right: 36rpx;
      border-radius: 58rpx;
      border: 3rpx solid #FFF;
    }

    &.active .opt-item-content {
      background-image: linear-gradient(180deg, #4ECFFF 0%, #06B2DE 100%);
      box-shadow: 0 2rpx 30rpx 0 #3DB2D2;
      color: #FFF;
    }
  }
}

.btm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 165rpx;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 60rpx;
  display: flex;
  justify-content: space-between;

  .btm-btn {
    width: 290rpx;
    height: 130rpx;
    margin-top: -36rpx;
  }
}
</style>